<template>
	<view class="bg-box">
    <view class="jsxt l_f_r_c_c">结算系统</view>

	</view>
	<view class="container" style="height: 0%;">
		<view class="content" style="padding-top: 0;">
			<view class="imgbox">

			</view>
			<!-- 	<view class="head">
				<br />
				<text>欢迎来到荷马商城</text>
			</view> -->
			<view class="box">
				<view class="titlebox">
					<view class="right active">
						<!-- 用户注册 -->
					</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="items">
							<view class="image">
								电话
							</view>
							<input class="uni-input" maxlength="11" v-model="form.mobile" placeholder="请输入电话" />
						</view>
					</view>
					<view class="item">
						<view class="items">
							<view class="image">
								验证码
							</view>
							<input  class="uni-input" maxlength="6" v-model="form.smg" placeholder="请输入验证码" />
						</view>
						<view class="code-box" @click="getcode">
							{{time}}
						</view>
					</view>
					<view class="item">
						<view class="items">
							<view class="image">
								推荐人
							</view>
							<input class="uni-input" maxlength="12" v-model="form.share" placeholder="请输入手机号" />
						</view>
					</view>
					<view class="item">
						<view class="items">
							<view class="image">
								密码
							</view>
							<input class="uni-input" v-model="form.password" placeholder="请输入密码"
								:password="showPassword" />
						</view>
						<uni-icons color="#333" :type="!showPassword?'eye-filled':'eye-slash-filled'" size="20"
							@click="changePassword"></uni-icons>
					</view>
					<view class="" style="margin-top: 100rpx;">
						<label class="radio" @click="checkedchange"
							style="display: flex;align-items: center;">
							<uni-icons type="checkbox" color="#FF4A01" v-if="checked" size="20"></uni-icons>
							<uni-icons type="circle" v-else size="20"></uni-icons>
							我已阅读并同意<text v-if="agreement!=2" style="color: #F67800;"
								@click="$goURl('/pages/personal/agreement/agreement?code=1')">《用户协议》</text><text
								>与</text><text v-if="agreement!=1"
								@click="$goURl('/pages/personal/agreement/agreement?code=0')" style="color: #F67800;">《隐私政策》</text>
						</label>
					</view>
					<view class="btnBoxs" @click="login" style="margin: 15rpx 0 20rpx 0;">
						注册
					</view>

					<view class="btnBox-text" @click="$goURl('/pages/login/login')">
						已有账号!<text>去登录</text>
					</view>
				</view>
				<view class=""></view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const {
		appContext
	} = getCurrentInstance();
	let form = reactive({
		mobile: '',
		password: '',
		share: '',
		smg: ''
	})
	let time = ref('获取验证码')
	let checked = ref(false)
	let showPassword = ref(true)
	let agreement = ref(0)
	onShow(() => {
		agreement.value = uni.getStorageSync('agreement')
	})
	onLoad((option) => {
		try {
			form.share = option.share
		} catch (e) {
			//TODO handle the exception
		}
	})

	function checkedchange() {
		console.log(12)
		checked.value = !checked.value
	}

	function getcode() {
		if (!checked.value) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请同意用户协议与隐私协议'
			});
			return false;
		}
		if (time.value != '获取验证码') {
			return false
		}

		if (!(/^1[3456789]\d{9}$/).test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '手机号不正确'
			});
			return false;
		}
		appContext.config.globalProperties.$request({
			url: `api/smscodesview/`,
			method: 'post',
			data: {
				mobile: form.mobile
			},
			success(res) {
				// uni.showToast({
				// 	icon:'none',
				// 	title:res.errmsg
				// })
				if (res.errno == 0) {
					let times = 60
					let timer = setInterval(function() {
						if (times == 0) {
							time.value = '获取验证码'
							clearInterval(timer)
						} else {
							times--
							time.value = times + 'S重发'
						}
					}, 1000)
				}
			}
		})
	}

	function login() {
		if (!checked.value) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请同意用户协议与隐私协议'
			});
			return false;
		}
		if (!(/^1[3456789]\d{9}$/).test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '手机号不正确'
			});
			return false;
		}

		if (form.smg.length != 6) {
			uni.showToast({
				icon: 'none',
				title: "请输入验证码"
			})
			return false
		}

		// if (!(/^1[3456789]\d{9}$/).test(form.share)) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		position: 'bottom',
		// 		title: '分享码不正确'
		// 	});
		// 	return false;
		// }  暂时不需要
		if (form.password.length < 6) {
			uni.showToast({
				icon: 'none',
				title: "请输入6位数及以上密码"
			})
			return false
		}
		appContext.config.globalProperties.$request({
			url: `api/register/`,
			method: 'post',
			data: form,
			success(res) {

				if (res.errno == 0) {
					let user = res.data
					user['password'] = form.password
					uni.setStorageSync('userInfo', user)
					let list = uni.getStorageSync('userList') ? uni.getStorageSync('userList') : []
					list = list.filter(item => {
						return item.ID != res.data.ID
					})
					list.unshift(user)
					uni.setStorageSync('userList', list)
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
					// #ifdef H5

					setTimeout(() => {
						goDown()
					}, 1000)
					// #endif
					// #ifndef H5
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/personal/index'
						})
					}, 1000)
					// #endif

				} else {
					uni.showToast({
						icon: 'none',
						title: res.errmsg
					})
				}
			}
		})
	}
	//下载
	function goDown() {
		var u = navigator.userAgent,
			app = navigator.appVersion;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
		// 是安卓浏览器
		if (isAndroid) {
			window.location.href = 'http://download.guanxikeji.com/download/hemashangcheng/'; // 跳安卓端下载地址
		} else {
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/personal/index'
				})
			}, 1000)
		}
		// 是iOS浏览器
		if (isIOS) {
			// window.location.href = 'http://pubuimg.cqguanjie.cn/apple/shibangkj.mobileconfig'; // 跳AppStore下载地址
		}

		// 是微信内部webView
		if (is_weixn()) {
			alert("请点击右上角按钮, 点击使用浏览器打开,注意苹果用户请使用苹果自带的Safari 浏览器打开");
		}

		// 是PC端
		//if (IsPC()) {
		//   window.location.href = 'http://192.168.0.101:8000/'; // 公司主页
		//}

	}

	function is_weixn() {
		var ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			return true;
		} else {
			return false;
		}
	}

	function changePassword() {
		console.log('showPassword', showPassword.value)
		showPassword.value = !showPassword.value;
	}
</script>
<style lang="scss" scoped>
	page{
		background: linear-gradient( 180deg, #FFFFFF 0%, #F4EBDB 100%);
	}
	@import '@/static/css/login.scss';
	.code-box{
		font-weight: 400;
		font-size: 28rpx;
		color: #F67800;
		width: 250rpx;
	}
	.bg-box{
		height: 528rpx;
		width: 100%;
		background-image: url('https://pili-vod.guanxikeji.com/fubao/img/1755841817057.png');
		background-size: 100%;
	}
</style>
